import { useEffect, useRef } from 'react';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import { GaugeChart } from 'echarts/charts';

import {
    GridComponent,
    DatasetComponent,
    LegendComponent
} from 'echarts/components';

echarts.use([
    GridComponent,
    TitleComponent,
    TooltipComponent,
    DatasetComponent,
    LegendComponent,
    BarChart,
    CanvasRenderer
]);

echarts.use([TitleComponent, TooltipComponent, BarChart, CanvasRenderer, PieChart, GaugeChart]);

const EChartsComponent = () => {
    const chartRef = useRef(null);
    const chartInstance = useRef(null); // 用于存储图表实例

    useEffect(() => {
        const chart = echarts.init(chartRef.current);

        // 初始化图表实例
        chartInstance.current = chart;

        let shujv = [];
        let obj = {};
        let data = [
            ['类型1',],
            [98],
        ]
        let colorList = ['#02C4A94C', '#02c4a9']
        data[0].forEach((itme, index) => {
            obj = {
                name: itme,
                value: data[1][index],
                itemStyle: {
                    color: { //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1, //从左到右 0-1
                        y2: 0,
                        colorStops: [{
                            offset: 0.3,
                            color: colorList[1]
                        }, {
                            offset: 1,
                            color: colorList[0]
                        }],
                    },
                },
            }
            shujv.push(obj)
        })
        const colorSet = [
            [0.3, '#3F4F5DCC'],
            [1, '#3F4F5DCC'],
        ];
        const getColor2 = function (x, y, r) {//圆心颜色变色
            return {
                type: "radial",
                x,
                y,
                r,
                colorStops: [
                    { offset: 1, color: colorList[0] },
                    { offset: 0, color: "rgba(26, 224, 186, 0)" }
                ]
            }
        }
        //绘制仪表盘
        let option = {
            backgroundColor: "#03171f",
            series: [{
                type: 'gauge',
                radius: '50%',
                center: ['50%', '60%'],
                max: 180,
                min: 0,
                z: 9999,
                startAngle: 180,
                endAngle: 0,
                pointer: {//仪表盘指针
                    show: true,
                    length: '18%',
                    width: 8,
                    icon: 'diamond',
                    offsetCenter: [0, -245],
                    itemStyle: {
                        color: colorList[1]
                    }
                },
                progress: {//仪表盘进度
                    show: true,
                    roundCap: false,
                    width: 15
                },
                splitNumber: 9,
                detail: {
                    formatter: function (value) {
                        var num = Math.round(value);
                        return '{bule|' + num + '}{bule|%}';
                    },
                    rich: {
                        bule: {
                            fontSize: 10,
                            fontFamily: 'siyaun',
                            color: '#fff8ff',
                            fontWeight: '800',
                        },
                    },
                    offsetCenter: ['0%', '-10%'],
                },

                data: shujv,
                title: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    roundCap: false,
                    lineStyle: {
                        color: colorSet,
                        width: 15
                    },
                },
                axisTick: {//仪表盘刻度
                    show: true,
                    splitNumber: 10,
                    length: 2,
                    lineStyle: {
                        color: colorList[1],
                        width: 1,
                        type: 'solid',
                    },
                    distance: -50,
                },
                splitLine: {//仪表盘分割线
                    show: true,
                    length: 2,
                    distance: -50,
                    lineStyle: {
                        color: colorList[1],
                        width: 1,
                        type: 'solid',
                    },
                },

                axisLabel: {
                    show: false,
                },
            },

            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [0, 0],
                center: ['50%', '50%'],
                roseType: 'radius',
                silent: true,
                startAngle: 180,
                legendHoverLink: false,
                itemStyle: {
                    borderRadius: 0,
                },
                label: {
                    show: false,
                },
                emphasis: {
                    label: {
                        show: false,
                    },
                },
                color: [getColor2(0.4, 0, 2), '#FFFFFF00'],
                data: [
                    { value: 10, name: 'r' },
                    { value: 10, name: 'r0' },
                ],
            },
            ],
        }
        chart.setOption(option);
        // 监听容器大小变化
        const resizeObserver = new ResizeObserver(() => {
            chart.resize();
        });
        resizeObserver.observe(chartRef.current);

        return () => {
            chart.dispose();
            resizeObserver.disconnect();
        };
    }, []);

    return <div ref={chartRef} style={{ width: '11vw', height: '7.8vw', maxWidth: '11vw', maxHeight: '7.8vw' }}></div>;
};

export default EChartsComponent;

